<template>
  <div class="movie-box">
    <van-image
        class="cover-image"
        :src="'http://localhost:3000/' + movie.image"
        radius="5px">
        <template v-slot:error>
          <img class="cover-image" src="">
        </template>
    </van-image>
    <div class="title">{{movie.title}}</div>
    <Star v-if="movie.rating" :rating="movie.rating" />
  </div>
</template>
<script>
import Star from "./Star";
export default {
  components: {
    Star
  },
  props:['movie']
}
</script>
<style scoped>
.movie-box{
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 205px;
  margin-left: 10px;
}
.cover-image{
  width: 100px;
  height: 145px;
}
.title{
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 15px;
  text-align: left;
  font-weight: bold;
}

</style>
